/*
 * Licensed to The Apereo Foundation under one or more contributor license
 * agreements. See the NOTICE file distributed with this work for additional
 * information regarding copyright ownership.
 *
 *
 * The Apereo Foundation licenses this file to you under the Educational
 * Community License, Version 2.0 (the "License"); you may not use this file
 * except in compliance with the License. You may obtain a copy of the License
 * at:
 *
 *   http://opensource.org/licenses/ecl2.txt
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  See the
 * License for the specific language governing permissions and limitations under
 * the License.
 *
 */


.drag-drop-items {
    box-sizing: border-box;
    padding: 15px 10px;

    .drag-item {
        @include user-select(none);
        height: 35px;
        width: 100%;
        border-radius: $main-border-radius;
        cursor: move;
        border: $thin-border-stroke $main-border-color;
        @include linear-gradient(top, #fff, #f3f5f6);
        color: darken(#8c939b, 10%);
        font-weight: 600;
        text-shadow: 0px 1px 0px #fff;
        font-size: 13px;
        position: relative;
        margin: 10px 0;
        box-shadow: 0 0 0 rgba(0,0,0,0);
        @include transition(box-shadow .3s ease-in-out);

        .title {
            padding: 10px;
            padding-left: 32px;
        }

        &:hover {
            @include linear-gradient(top, #fff, darken(#f3f5f6, 2%));
        }

        &:active,
        &.being-dragged {
            @include linear-gradient(top, darken(#fff, 2%), darken(#f3f5f6, 3%));
            cursor: move;
            border: $thin-border-stroke darken($main-border-color, 5%);
            box-shadow: 0 0 4px rgba(0,0,0,0.1);
        }

        &:first-child {
           margin-top: 0;
        }

        &:last-child {
           margin-bottom: 50px;
        }

        // Grip Dots

        &:before {
            width: 13px;
            height: 14px;
            content: "";
            position: absolute;
            top: 12px;
            left: 10px;
            @include retina-image("#{$img-path}grip", 13px 14px);
        }

        // Item Move Buttons

        .move-item {
            height: 17px;
            width: 17px;
            position: absolute;
            top: 9px;
            right: 10px;

            &.add {
                @include retina-image("#{$img-path}plus-icon", 17px 17px);
            }

            &.remove {
                @include retina-image("#{$img-path}remove-icon", 17px 17px);
            }
        }
    }
}